<template>
	<view>
		<view class="row form" style="padding-top:30%;">
			<view class="col-xs row form-item-input bottom-radius">
				<input v-model="form.username" type="text" placeholder="输入账号" />
			</view>
			<view class="col-xs row form-item-input top-radius">
				<input v-model="form.password" password type="password" placeholder="输入密码" />
			</view>
		</view>

		<view style="padding:0upx 60upx">
			<button @click="submit_login" type="warn">登录</button>
			<navigator url="register" hover-class="navigator-hover">
				<button type="default" style="margin-top:15upx">注册</button>
			</navigator>
		</view>
		<text class="row center-xs" style="padding-top:10%;color:#6c757d">© 2017-2018</text>
	</view>
</template>

<script>
	import * as API from 'server/getData'
	import * as types from 'store/mutations_types'
	import { mapState } from 'vuex'

	export default {
		components: {
		},
		data() {
			return {
				form: {
					username: '',
					password: '' 
				},
			}
		},
		onLoad() {
			if (this.user) {
				uni.reLaunch({url: 'index'});
			}
		},
		computed: {
			...mapState(['user', 'tabBar'])
		},
		methods: {
			async submit_login() {
				if (this.form.username === '' || this.form.password === '') {
					uni.showToast({
                        icon: 'none',
                        title: '账号或密码不能为空'
                    });
					return false
				}
				uni.showLoading({ title: '登陆中' })
				let res = await API.user.login({
					grant_type: 'password',
					username: this.form.username,
					password: this.form.password
				})
				uni.hideLoading()
				if (!res.success) {
					uni.showToast({
                        icon: 'none',
                        title: res.message
                    });
				}
				if (res.success) {
					this.$store.commit(types.TOKEN, res.data)
					let user = await API.user.fetchUser()
					if (user.success === true) {
						this.$store.commit(types.LOGIN, user.data)
						uni.reLaunch({url: 'index'})
					}
				}
			}
		}
	}
</script>

<style>
	@import '../../common/flexboxgrid.min.css';
	view {
		font-size: 28upx;
		line-height: inherit
	}
	.row {margin: 0upx;}
	.col-xs{margin: 0upx; padding: 0upx;}
	.form {padding:0upx 60upx}
	.form-item-input {
		flex:auto;
		max-width: 100%;
	}
	.form-item-input input{
		display: block;
		width: 100%;
		padding: 10px;
		font-size: 1rem;
		line-height: 1.5;
		color: #495057;
		background-color: #fff;
		background-clip: padding-box;
		border: 1px solid #ced4da;
		border-radius: .25rem;
		transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
	}
	.bottom-radius input {
		margin-bottom: -1px;
		border-bottom-right-radius: 0;
		border-bottom-left-radius: 0;
	}
	.top-radius input {
		margin-bottom: 10px;
		border-top-left-radius: 0;
		border-top-right-radius: 0;
	}
		
</style>

